<h2 class="mt-30"> {{t 'loggingPage.kafka.header'}} </h2>
<hr/>

<div class="box mb-10">
  <div>
    <span class="pr-10">{{t 'loggingPage.kafka.endpointType'}}:</span>
    <label class="mr-10">{{radio-button selection=brokerType value="zookeeper"}} {{t 'loggingPage.kafka.zookeeper'}}</label>
    <label class="mr-10">{{radio-button selection=brokerType value="broker"}} {{t 'loggingPage.kafka.broker'}}</label>
    <p class="text-info text-small">{{t 'loggingPage.kafka.brokerTypeHelpText'}}</p>
  </div>
  <hr/>
  <section class="mb-30">
  {{#if (eq brokerType 'zookeeper')}}
    <div>
      <label class="acc-label" for="">{{t 'loggingPage.endpoint'}}{{field-required}}</label>
      {{input
          type="text"
          value=config.zookeeperEndpoint
          classNames="form-control"
          placeholder=(t 'loggingPage.endpointPlaceholder')
          id="kafka-endpoint"
      }}
    </div>
    <p class="text-info text-small mb-0">{{t 'loggingPage.kafka.zookeeperHelpText'}}</p>
  {{else}}
    {{#each brokerEndpoints as |item idx|}}
      <div class="row">
        <div class="col span-11">
          <label class="acc-label" for="">{{t 'loggingPage.endpoint'}}
            {{#if (eq idx 0)}}
              {{field-required}}
            {{/if}}
          </label>
          {{input
              type="text"
              value=item.endpoint
              classNames="form-control"
              placeholder=(t 'loggingPage.endpointPlaceholder')
          }}
        </div>
        <div class="col span-1" style="padding-top: 29px">
          <button class="btn bg-primary icon-btn {{if canRemove '' 'disabled'}}" {{action "remove" item}}>
            <span class="darken"><i class="icon icon-minus"></i></span>
          </button>
        </div>
      </div>
    {{/each}}
    <p class="text-info text-small mb-0">{{t 'loggingPage.kafka.brokerHelpText'}}</p>
    <div class="mt-20">
      <button class="btn bg-link icon-btn p-0" {{action "add"}}>
        <span class="darken"><i class="icon icon-plus text-small"/></span>
        <span>{{t 'loggingPage.kafka.addEndpoint'}}</span>
      </button>
    </div>
  {{/if}}
  </section>
  <hr/>
  <div class="row">
    <div class="col span-6 mt-0 pt-0">
      <label class="acc-label" for="">{{t 'loggingPage.kafka.topic.label'}}{{field-required}}</label>
      {{input
          type="text"
          value=config.topic
          classNames="form-control"
          placeholder=(t 'loggingPage.kafka.topicPlaceholder')
      }}
      <p class="text-info text-small">{{t 'loggingPage.kafka.topicHelpText'}}</p>
    </div>
  </div>
</div>

{{#if (eq brokerType 'broker')}}
  {{logging/form-log-ssl
      config=config
      targetType=targetType
  }}
  
  {{logging/form-log-sasl
      config=config
  }}
{{/if}}

{{logging/form-log-format
    logPreview=logPreview
    model=model
}}
{{!--
  {{#advanced-section advanced=showAdvanced}}
  {{logging/form-log-docker model=model parentModel=parentModel}}
  {{/advanced-section}} --}}
